<template>
	<view>
			<view class="container">
				<form bindsubmit="bindSave">
					<view class="form-box">
						<view class="row-wrap">
							<view class="label">联系人</view>
							<view class="label-right">
								<input name="linkMan" v-model="name" class="input" placeholder="姓名" />
							</view>
						</view>
						<view class="row-wrap">
							<view class="label">手机号码</view>
							<view class="label-right">
								<input name="mobile" v-model="phone" class="input" maxlength="11" type="number" placeholder="11位手机号码" />
							</view>
						</view>
						<view class="row-wrap">
							<view class="label">选择地区</view>
							<view class="picker hui" @click="showpicker" v-if="!truevalue">请选择</view>
							<view class="picker" @click="showpicker" v-if="truevalue">{{province}}</view>
							<view class="picker" @click="showpicker" v-if="truevalue">{{city}}</view>
							<view class="picker" @click="showpicker" v-if="truevalue">{{district}}</view>
						</view>
						<view class="addr-details">
							<view class="label">详细地址</view>
							<view class="label-right">
								<textarea name="address" v-model="detailed_address" auto-height placeholder="街道门牌信息" />
								</view>
						</view>
						<!-- <view class="row-wrap">
							<view class="label dzlabel">是否为默认地址</view>
							<view class="label-right">
								<switch @change="switchChange" :checked="is_default?true:false"/>
							</view>
						</view> -->
				</view>
				<button type="warn" class="save-btn" @click="save">保存</button>
				<button type="default" class="save-btn" @click="deleteAddress" v-if="is_edit==1">删除该地址</button>
			</form>
		</view>
		<view v-if="visible">
        <view class="btnbox">
					<button type="primary" class="mini-btn leftbtn" @click="hidepicker">取消</button>
					<button type="primary" class="mini-btn rightbtn" @click="turepicker">确定</button>
				</view>
        <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange">
            <picker-view-column>
                <view class="item" v-for="(item,index) in provinces" :key="index">{{item.name}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in citys" :key="index">{{item.name}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in districts" :key="index">{{item.name}}</view>
            </picker-view-column>
        </picker-view>
    </view>
	</view>
</template>

<script>
	import API from '@/common/api';
	// import CFG from '@/common/config';
	export default {
		data: function () {
            return {
								provinces: [],
								citys: [],
								districts: [],
								province: '',
								city: '',
								district: '',
								value: [0,0,0],
								change_value:[0,0,0],
								truevalue:false,
								addressData:false,
								
								name:'',
								phone:'',
								detailed_address:'',
								is_default:0,
								is_edit:0,
								editids:[],
								edit_id:null,
								userid:uni.getStorageSync("userid"),
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
                visible: false,
                indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}upx;`
            }
        },
		onLoad:function(e){
			if(e.id){
				this.address_get(e);
				this.is_edit = 1;
				this.edit_id=e.id;
				this.addressData = true;
				uni.setNavigationBarTitle({
					title:'修改地址',
				})
				this.truevalue=true
			}
			this.addressList('province');//获取地址三级列表
		},
		methods:{
			showpicker:function(){
				this.visible = true;//显示弹出11111
			},
			hidepicker:function(){
				this.visible = false;//显示隐藏1111
			},
			switchChange:function(e){//按钮选择1111
				if(e.target.value){
					this.is_default = 1;
				}else{
					this.is_default = 0;
				}
			},
			address_get(e){//地址编辑获取数据
				var _this=this;
				uni.request({
					url:API.mallAddress_list,
					data:{where:{id:e.id}},
					method:"GET",
					header:API.get_head(),
					success: (res) => {
						_this.province=res.data.rows[0].province;
						_this.city=res.data.rows[0].city;
						_this.district=res.data.rows[0].district;
						_this.detailed_address=res.data.rows[0].detail;
						_this.name=res.data.rows[0].name;
						_this.phone=res.data.rows[0].mobile;
						_this.editids[
							{id:res.data.rows[0].province_id,name:res.data.rows[0].province},
							{id:res.data.rows[0].city_id,name:res.data.rows[0].city},
							{id:res.data.rows[0].district_id,name:res.data.rows[0].district}
						]
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					 }
				})
			},
			addressList(level,pid){//获取地址三级列表11111
				var _this=this;
				var data_arr={};
				data_arr.level=level;
				if(pid||pid==0){data_arr.pid=pid};
				uni.request({
					url:API.addressList,
					data:data_arr,
					method:"GET",
					header:API.get_head(),
					success: (res) => {
						if(level=="province"){
							_this.provinces = res.data;
							_this.addressList('city',_this.provinces[0].id)
						}else if(level=="city"){
							_this.citys = res.data;
							_this.addressList('district',_this.citys[0].id)
						}else if(level=="district"){
							_this.districts = res.data;
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					 }
				})
			},
			deleteAddress:function(){
				var _this = this;
				uni.showModal({
					title:"提示",
					content:"确定要删除改地址？",
					success:function(res){
						 if (res.confirm) {
							uni.request({
								url:API.mallAddress_remove,
								method:"GET",
								data:{ids:_this.edit_id},
								header:API.get_head(),
								success: (res) => {
									uni.showToast({
										title:res.data.message,
										duration:1500,
									})
									uni.navigateBack({
										delta:1,
									});
								},
								fail: () => {
									uni.showToast({
										title:"加载失败",
										icon:'none'
									})
								 }
							})
						}
					}
				})
				
			},
			address_del(){//删除地址
				
			},
			bindChange: function (e) {//11111
				const val = e.detail.value;
				if(val[0]!=this.value[0]){
					this.addressList('city',this.provinces[val[0]].id);
				}else if(val[1]!=this.value[1]){
					this.addressList('district',this.citys[val[1]].id);
				}
				this.value = val;
			},
			turepicker:function(){//选择完成
				this.hidepicker();
				this.truevalue=true;
				this.province=this.provinces[this.value[0]].name;
				this.city=this.citys[this.value[1]].name;
				this.district=this.districts[this.value[2]].name;
			},
			save:function(){
				if(!this.name){
					uni.showToast({title:"请输入名称",duration:1500,icon:"none"});
					return false;
				}
				if(this.phone.match(/^1\d{10}/) == null){
					uni.showToast({title:"请输入正确的电话",duration:1500,icon:"none"});
					return false;
				}
				if(!this.truevalue){
					uni.showToast({title:"请选择地址",duration:1500,icon:"none"});
					return false;
				}
				if(!this.detailed_address){
					uni.showToast({title:"请输入详细地址",duration:1500,icon:"none"});
					return false;
				}
				
				if(this.is_edit==0){
					var data={
						'mall_address.user_id':this.userid,					//用户ID
						'mall_address.name':this.name,							//用户名字
						'mall_address.mobile':this.phone,						//用户电话
						'mall_address.province_id':this.provinces[this.value[0]].id,				//省编号 
						'mall_address.province':this.provinces[this.value[0]].name,			//省
						'mall_address.city_id':this.citys[this.value[1]].id,				//市编号
						'mall_address.city':this.citys[this.value[1]].name,				//市
						'mall_address.district_id':this.districts[this.value[2]].id,				//区编号 
						'mall_address.district':this.districts[this.value[2]].name,			//区
						'mall_address.detail':this.detailed_address,			//详细
					}
					this.mallAddress_save(data);
				}else{
					var data={
						'mall_address.id':this.edit_id,//更改id
						'mall_address.user_id':this.userid,					//用户ID
						'mall_address.name':this.name,							//用户名字
						'mall_address.mobile':this.phone,						//用户电话
						'mall_address.province_id':this.provinces[this.value[0]].id,				//省编号 
						'mall_address.province':this.provinces[this.value[0]].name,			//省
						'mall_address.city_id':this.citys[this.value[1]].id,				//市编号
						'mall_address.city':this.citys[this.value[1]].name,				//市
						'mall_address.district_id':this.districts[this.value[2]].id,				//区编号 
						'mall_address.district':this.districts[this.value[2]].name,			//区
						'mall_address.detail':this.detailed_address,			//详细
					}
					if(!this.truevalue){
						data['mall_address.province_id']=this.editids[0].id;				//省编号 
						data['mall_address.province']=this.editids[2].name;			//省
						data['mall_address.city_id']=this.editids[1].id;				//市编号
						data['mall_address.city']=this.editids[2].name;				//市
						data['mall_address.district_id']=this.editids[2].id;				//区编号 
						data['mall_address.district']=this.editids[2].name;			//区
					}
					
					this.mallAddress_update(data);
				}

			},
			mallAddress_save(data){
				uni.request({
					url:API.mallAddress_save,
					method:"GET",
					data:data,
					header:API.get_head(),
					success: (res) => {
						if(res.data.success){
							setTimeout(function(){
								uni.navigateBack({
									delta:1,
								})
							},1500)
						}
						uni.showToast({
							title:res.data.message,
							duration:1500,
						})
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					 }
				})
			},
			mallAddress_update(data){//修改
				uni.request({
					url:API.mallAddress_update,
					method:"GET",
					data:data,
					header:API.get_head(),
					success: (res) => {
						if(res.data.success){
							setTimeout(function(){
								uni.navigateBack({
									delta:1,
								})
							},1500)
						}
						uni.showToast({
							title:res.data.message,
							duration:1500,
						})
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					 }
				})
			}
		}
	}
</script>

<style>
	@import "../../common/uni.css";
page{
    height: 100%;
}
.container{
    background-color: #f5f5f9;
    justify-content: initial;
}
.form-box{
    width:100%;
    background-color: #fff;
    margin-top: 20upx;
}
.row-wrap{
    width: 720upx;
    height: 88upx;
    line-height: 88upx;
    margin-left: 30upx;
    border-bottom: 1upx solid #eee;
    display: flex;
    font-size: 28upx;
    /*justify-content: space-between;*/
}
.row-wrap .label{
    width: 160upx;
    color: #000;
	line-height:88upx;
}
.row-wrap .dzlabel{
	width: 220upx;
}
.row-wrap .label-right{
    flex: 1;
    height: 88upx;
    line-height: 88upx;
}
.row-wrap .label-right input{
    height: 100%;
    font-size: 28upx;
    padding-right: 30upx;
}
.row-wrap .right-box{
    margin-right: 30upx; 
}
.arrow-right{
    width: 15upx;
    height: 24upx;
}
.save-btn,
.cancel-btn{
    width: 690upx;
    height: 80upx;
    line-height: 80upx;
    text-align: center;
    margin-top:30upx; 
    border-radius: 6upx;
    box-sizing: border-box;
}
.save-btn{
    background-color: #e64340;
    color:#fff;
}
button[type="default"]{
    background-color: #ffffff;
    color:#000;
}
.addr-details{
    height: auto;
    padding: 30upx 0;
    margin-left:30upx;
    border-bottom: 1upx solid #eee;
    display: flex;
    font-size: 28upx;
}
.addr-details .label{
    margin:auto 0 auto 0;
    width: 160upx;
    color: #000;
	line-height: 1;
}
.addr-details textarea{
    box-sizing: border-box;
    width: 480upx;
    overflow: scroll;
}
picker {
    min-width: 20upx;
    height: 100%;
    margin-right: 20upx;
}
.picker{
	line-height:88upx;
}
.hui{
    color: #777;
}

/*三级联动*/
    picker-view {
        width: 100%;
        height: 600upx;
    }
    .item {
        line-height: 100uupx;
        text-align: center;
    }
.btnbox{
	overflow: hidden;
	background:#FFFFFF;
	border-bottom:1upx solid #CCCCCC;
}
.btnbox .leftbtn{
	float:left;
	line-height:1;
	font-size:26upx;
	margin:10upx;
	padding:10upx 20upx;
	background:#CCCCCC;
}
.btnbox .rightbtn{
	float:right;
	line-height:1;
	font-size:26upx;
	margin:10upx;
	padding:10upx 20upx;
}

textarea{
	height: auto;
}
</style>
